<template>
    <el-container>
        <el-header class="w">
            <div class="left">
                <img src="@/assets/img/logo.png" alt="" width="200" />
                <span>欢迎注册</span>
            </div>
            <div class="right">
                <div>如有问题请拨打</div>
                <div>40000-1000-25</div>
            </div>
        </el-header>
        <el-main>
            <!-- 必填注册信息 -->
            <div class="w mask">
                <el-form class="login" :model="requiredForm" ref="requiredRefs" :rules="requiredRules" :inline="false">
                    <div class="title">
                        <div>供应商注册</div>
                        <span><router-link to="/login">立即登录</router-link></span>
                    </div>
                    <el-form-item prop="unitName" class="singin__item">
                        <el-input
                            v-model="requiredForm.unitName"
                            placeholder="请输入单位名称"
                            :prefix-icon="House"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item prop="email" class="singin__item">
                        <el-input
                            v-model="requiredForm.email"
                            placeholder="请输入邮箱"
                            :prefix-icon="Message"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item prop="password" class="singin__item">
                        <el-input
                            type="password"
                            v-model="requiredForm.password"
                            placeholder="请输入密码"
                            :prefix-icon="Lock"
                            style="letter-spacing: 10px"
                            clearable
                            show-password
                        />
                    </el-form-item>
                    <el-form-item class="verify-block" prop="verificationCode">
                        <el-input
                            v-model="requiredForm.verificationCode"
                            placeholder="请输入验证码"
                            :prefix-icon="ChatDotRound"
                            clearable
                        />
                        <el-button
                            type="primary"
                            plain
                            size="default"
                            :disabled="!(isEmail && !isCounting)"
                            @click="getVerifyCode"
                        >
                            {{ buttonText }}
                        </el-button>
                    </el-form-item>

                    <el-button @click="checkRequired">注册</el-button>
                </el-form>
                <img src="@/assets/img/undraw_science_re_mnnr.svg" alt="" />
            </div>

            <!-- 可选注册信息 -->
            <el-dialog v-model="dialogFormVisible" title="其他信息" width="600">
                <el-form class="optional" :model="optionalForm" label-width="auto">
                    <el-form-item label="用户名">
                        <el-input class="uname" type="text" v-model="optionalForm.userName" clearable />
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input class="phone" v-model="optionalForm.phoneNum" clearable />
                    </el-form-item>
                    <el-form-item label="课题组名称">
                        <el-input class="rpg-name" v-model="optionalForm.rpgName" clearable />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="onSingin">跳过</el-button>
                        <el-button type="primary" @click="onSingin">提交</el-button>
                    </div>
                </template>
            </el-dialog>
        </el-main>
        <el-footer>
            <a rel="nofollow" target="_blank" href="#">关于我们</a>
            /
            <a rel="nofollow" target="_blank" href="#">联系我们</a>
            /
            <a rel="nofollow" target="_blank" href="#">人才招聘</a>
            /
            <a rel="nofollow" target="_blank" href="#">商家入驻</a>
            /
            <a rel="nofollow" target="_blank" href="#">广告服务</a>
            /
            <a rel="nofollow" target="_blank" href="#">销售联盟</a>
            /
            <a rel="nofollow" target="_blank" href="#">友情链接</a>
            /
            <a rel="nofollow" target="_blank" href="#">在线客服</a>
        </el-footer>
    </el-container>
</template>

<script setup>
//#region 导入和默认配置
import { Lock, ChatDotRound, House, Message } from '@element-plus/icons-vue';
import { reactive, ref } from 'vue';
import { getEmailCode, userSingin } from '@/api/userApi.js';
const dialogFormVisible = ref(false);
// 按钮状态
const isCounting = ref(false);
// 按钮文字
const buttonText = ref('获取验证码');
const requiredRefs = ref();
const isEmail = ref(false);

let requiredForm = reactive({
    email: '',
    password: '',
    verificationCode: '',
    unitName: '',
});

let optionalForm = reactive({
    userName: '',
    phoneNum: '',
    rpgName: '',
});

// 邮箱验证规则
const emailValidator = (rule, value, callback) => {
    const emailRe =
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    const result = emailRe.test(value);
    console.log('邮箱格式' + result);
    if (result) {
        isEmail.value = true;
        console.log('邮箱校验成功');
        callback();
    } else {
        isEmail.value = false;
        callback(new Error('Illegal email address!'));
    }
};

// 必填表单验证规则
const requiredRules = {
    email: [
        {
            required: true,
            message: '请输入电子邮箱地址',
            trigger: 'change',
        },
        {
            validator: emailValidator,
            message: '请输入正确的邮箱格式',
            trigger: 'change',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'change',
        },
    ],
    verificationCode: [
        {
            required: true,
            message: '请输入验证码',
            trigger: 'change',
        },
        {
            pattern: /^[a-zA-Z0-9]{6}$/,
            message: '限制6位数字或字母',
            trigger: 'blur',
        },
    ],
    unitName: [
        {
            required: true,
            message: '请输入单位名称',
            trigger: 'change',
        },
    ],
};

/**
 * @description: 获取邮箱验证码
 * @return {*}
 */
const getVerifyCode = () => {
    // 点击发送验证码后禁用按钮
    // 并倒计时60秒后启用
    // 按钮显示倒计时时间

    getEmailCode(requiredForm.email).then(res => {
        ElMessage.success('验证码已发送，请注意查收');
    });
    if (isCounting.value) {
        return;
    }
    isCounting.value = true;
    buttonText.value = '60s';
    let count = 60;
    const timer = setInterval(() => {
        count--;
        buttonText.value = `${count}s`;
        if (count === 0) {
            clearInterval(timer);
            isCounting.value = false;
            buttonText.value = '获取验证码';
        }
    }, 1000);
};

/**
 * @description: 必填表单验证
 */
const checkRequired = event => {
    event.preventDefault();
    requiredRefs.value.validate(valid => {
        if (valid) {
            // 表单验证成功逻辑
            dialogFormVisible.value = true;
        } else {
            // 表单验证失败逻辑
            ElMessage.error('输入不合法，请检查输入内容正确性');
            return;
        }
    });
};
//注册
const onSingin = event => {
    event.preventDefault();
    let singinForm = { ...requiredForm, ...optionalForm };
    dialogFormVisible.value = false;
    userSingin(singinForm).then(res => {
        console.log(res);
        ElMessage.success('注册成功');
    });
    console.log(singinForm);
};
</script>

<style scoped lang="scss">
.w {
    //版心宽度 1200px
    margin: 0 auto;
    width: 1200px;
}
.el-header {
    height: 130px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    .left {
        display: flex;
        align-items: center;
    }
    .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        div:first-child {
            font-size: 16px;
        }
        div:last-child {
            font-size: 28px;
            color: #1f528a;
        }
    }
}
.el-main {
    padding: 0;
    width: 100%;
    height: 560px;
    background-color: #1963b1;

    .mask {
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: rgba(255, 255, 255, 0.4);
    }
    .mask > img {
        width: 50%;
        height: 65%;
    }
}

// 登录表单
.login {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 5%;
    margin-top: -5%;
    .el-form-item {
        margin-bottom: 10px;
    }
    .title {
        padding: 18px 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        div {
            font-size: 24px;
            color: #333333;
        }
        span {
            font-size: 16px;
            color: #333333;
            cursor: pointer;
        }
    }
    .verify-block {
        position: relative;
        padding-bottom: 8px;
        .el-input {
            height: 40px;
        }
        .el-button {
            height: 38px;
            position: absolute;
            right: 0;
            border: none;
        }
    }
    .singin__item {
        padding-bottom: 8px;
        .el-input {
            height: 40px;
        }
    }
}

// 可选注册信息表单
.optional {
    .uname {
        width: 265px;
    }
    .phone {
        width: 265px;
    }
    .rpg-name {
        width: 460px;
    }
}

.el-footer {
    height: auto;
    text-align: center;
    padding: 20px 0;
    a {
        margin: 0 10px;
        text-decoration: none;
        color: #000000;
        font-size: 16px;
        font-weight: 500;
        &:hover {
            color: #225a96;
        }
    }
}
</style>
